import {SvgXml} from 'react-native-svg';
import {StatusBar} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
// 导入svg XML字符串
import HomeSvg from '../assets/Images/home.svg';
import HomeActived from '../assets/Images/home-actived.svg';
import Mine from '../assets/Images/mine.svg';
import MineActived from '../assets/Images/mine-actived.svg';
import Police from '../assets/Images/police.svg';
import PoliceActived from '../assets/Images/police-actived.svg';
import Assist from '../assets/Images/assist.svg';
import AssistActived from '../assets/Images/assist-actived.svg';
import Home from 'views/Home';
import Combat from 'views/combat';
import System from 'views/system';
import {useEffect} from 'react';
import useDimensions from 'hooks/useDimensions';
const Tab = createBottomTabNavigator();
export default () => {
  const hp = useDimensions();
  useEffect(() => {
    StatusBar.setHidden(false);
  });
  const iconStyles = {
    width: 24 * hp,
    height: 24 * hp,
  };
  return (
    <Tab.Navigator
      initialRouteName="index"
      screenOptions={() => {
        return {
          headerShown: false,
          tabBarStyle: {
            height: 56 * hp,
          },
          tabBarLabelStyle: {
            marginLeft: 16 * hp,
          },
          tabBarActiveTintColor: '#0A59F7',
        };
      }}>
      <Tab.Screen
        name="index"
        component={Home}
        options={{
          tabBarLabel: '首页',
          tabBarIcon: ({focused}) => (
            <SvgXml {...iconStyles} xml={focused ? HomeActived : HomeSvg} />
          ),
        }}
      />
      <Tab.Screen
        name="details"
        getComponent={() => require('views/police').default}
        options={{
          tabBarLabel: '警情',
          tabBarIcon: ({focused}) => {
            return (
              <SvgXml {...iconStyles} xml={focused ? PoliceActived : Police} />
            );
          },
        }}
      />
      <Tab.Screen
        name="assist"
        getComponent={() => require('views/assist').default}
        options={{
          tabBarLabel: '辅助',
          tabBarIcon: ({focused}) => (
            <SvgXml {...iconStyles} xml={focused ? AssistActived : Assist} />
          ),
        }}
      />
      <Tab.Screen
        name="Combat"
        component={Combat}
        options={{
          tabBarLabel: '作战记录',
          tabBarIcon: ({focused}) => (
            <SvgXml {...iconStyles} xml={focused ? AssistActived : Assist} />
          ),
        }}
      />
      <Tab.Screen
        name="system"
        component={System}
        options={{
          tabBarLabel: '系统',
          tabBarIcon: ({focused}) => (
            <SvgXml {...iconStyles} xml={focused ? MineActived : Mine} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};
